<template>
  <div class="box">
    <div class="top">
      <el-card class="topp">
        <div class="demo-input-suffix">
          用户名称
          <el-input
            placeholder=""
            label-width="80px"
            style="width: 200px"
            v-model="form.username"
          >
          </el-input>
          用户邮箱
          <el-input
            placeholder=""
            label-width="80px"
            style="width: 200px"
            v-model="form.email"
          >
          </el-input>
          角色
          <el-select v-model="form.role_id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.role_id"
              :label="item.label"
              :value="item.role_id"
            ></el-option>
          </el-select>

          <el-button type="primary" style="margin-left: 10px" @click="searchBtn"
            >搜索</el-button
          >

          <el-button @click="clearBtn">清除</el-button>
          <el-button type="primary" @click="addClick">+新增用户</el-button>
        </div>
      </el-card>
    </div>
    <div class="botton">
      <el-card>
        <el-table :data="list">
          <el-table-column type="index" label="序号">
            <template v-slot="{ $index }">
              {{ (form.page - 1) * form.limit + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="phone" label="电话"> </el-table-column>
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="role_id" label="角色">
            <template v-slot="{ row }">
              <span v-html="role(row)"> </span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"> </el-table-column>
          <el-table-column label="状态" prop="status">
            <template v-slot="{ row }">
              <el-switch
                v-model="row.status"
                active-color="#409eff"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                @change="close(row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button type="text" @click="cutBtn(row)">
                {{ row.status === 0 ? '启用' : '禁用' }}</el-button
              >

              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <span class="demonstration"></span>
        </div>
        <div class="page">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="form.page"
            :page-size.sync="form.limit"
            :page-sizes="[1, 5, 10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <add ref="add" @getData="getData" />
  </div>
</template>
<script>
import { userlist, userremove, userstatus } from '@/api/userlist'
import add from '@/views/userlist/components/add.vue'
import jsCookie from 'js-cookie'
export default {
  components: {
    add
  },
  data () {
    return {
      form: {
        username: '',
        email: '',
        value: '',
        page: 1,
        limit: +jsCookie.get('limit') || 1,
        role_id: ''
      },
      options: [
        { role_id: 1, label: '超级管理员' },
        { role_id: 2, label: '管理员' },
        { role_id: 3, label: '老师' },
        { role_id: 4, label: '学生' }
      ],

      list: [],

      total: 100
      // options: [
      //   {
      //     value: '选项1',
      //     label: '超级管理员'
      //   },
      //   {
      //     value: '选项2',
      //     label: '管理员'
      //   },
      //   {
      //     value: '选项3',
      //     label: '老师'
      //   },
      //   {
      //     value: '选项4',
      //     label: '学生'
      //   }
      // ],
    }
  },
  created () {
    this.getData()
  },
  queryInfo: {
    query: '',
    pagenum: '',
    pagesize: ''
  },
  methods: {
    handleSizeChange () {
      this.getData()
      jsCookie.set('limit', this.form.limit)
    },
    handleCurrentChange () {
      this.getData()
    },

    async getData () {
      const res = await userlist(this.form)
      this.list = res.data.items
      this.total = res.data.pagination.total
      // console.log(this.total)
      // console.log(res)
    },
    // 这里做一个新建弹框
    addClick () {
      this.$refs.add.show = true
      this.$refs.add.mode = 'add'
    },
    // 这是一个编辑按钮
    edit (row) {
      // 打开弹框
      this.$refs.add.show = true
      // 调整mode的值
      this.$refs.add.mode = 'edit'
      // 深拷贝赋值当前行数据
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 把数据回显出来
    del (id) {
      this.$confirm('您确定删除此学科吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '点错了',
        type: 'warning'
      })
        .then(async () => {
          await userremove({ id })
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          if (this.form.page > 1 && this.list.length <= 1) {
            this.form.page--
          }
          this.getData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    searchBtn () {
      this.getData()
    },
    clearBtn () {
      this.form.username = ''
      this.form.email = ''
      this.form.value = ''
      this.form.role_id = ''
      this.getData()
    },

    role (row) {
      // console.log(row)
      if (row.role_id === 1) {
        return '超级管理员'
      } else if (row.role_id === 2) {
        return '管理员'
      } else if (row.role_id === 3) {
        return '老师'
      } else if (row.role_id === 4) {
        return '学生'
      } else {
        return '-'
      }
    },
    // 状态切换
    async cutBtn (row) {
      await userstatus({
        id: row.id,
        status: row.status
      })

      this.getData()
      this.$message.success('切换状态成功')
    },
    // 开关按钮
    async close (row) {
      await userstatus({
        id: row.id,
        status: row.status
      })
      this.getData()
      this.$message.success('切换状态成功')
    }
  }
}
</script>
<style>
.box {
  padding: 10px;
  background-color: #cccccc;
}
.employees {
  padding: 20px;
}
.block {
  text-align: center;
  padding-top: 20px;
}
</style>
